<template>
	<view class="container">
		<view class="tui-footer">
			<image :src="$cdn.share_tip" @tap="previewImage" style="height: 180px;width: 100%;" mode="aspectFit"></image>
			<!-- <view class="tui-footer-text">扫描二维码，联系我们！</view> -->
		</view>
		<view class="tui-content-box">
			<view class="tui-content" style="text-align: left !important;color: #5677FC;" @tap="toShareList">您共邀请<span class="span-big">{{count}}位</span>朋友加入</view>
			<!-- <view class="tui-content" style="text-align: right !important;color: #5677FC;">共获得<span class="span-big">{{totalCoin}}</span>趣币</view> -->
			<view class="tui-content" style="font-size: 11px;color: #888888;">规则说明：
				<p>1.每邀请一位朋友加入后，用户使用该平台报名活动，您都将获取分享佣金</p>
				<p>2.奖励无上限，邀请越多佣金越多，佣金可在平台提现</p>
				<p style="color: #FF7900;">注：因提现模块还在开发中，提现请联系客服微信:pigfun8</p>
			</view>
		</view>
		<view class="tui-btn-box" style="margin-top: 40px;">
			<button class="btn-primary" hover-class="btn-hover" @tap="toShare" formType="submit" type="primary">去分享</button>
			<!-- <button class="btn-primary btn-gray" hover-class="btn-gray-hover" formType="reset">重置</button> -->
		</view>
		<!-- 分享弹框 -->
		<wei-share ref="weiShare" @posterHandle="toPosterPageView"></wei-share>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import weiShare from '@/components/wei-share/wei-share.vue';
export default {
	computed: mapState(['memberId']),
	// 小程序自动监听分享按钮事件
	onShareAppMessage(res) {
		return {
			// imageUrl
			title: '发现一个好玩的应用，分享活动还可以赚佣金，参加同城社交活动可以认识新的圈子哦',
			path: '/pages/home/index?recommend='+this.memberId
		};
	},
	// 分享到朋友圈
	onShareTimeline(){
		return {
			title: '发现一个好玩的应用，分享活动还可以赚佣金，参加同城社交活动可以认识新的圈子哦',
			query: '/pages/home/index?recommend='+this.memberId,
			imageUrl:this.$cdn.share_tip
		};
	},
	data() {
		return {
			$cdn:this.$cdn,
			totalCoin:0,
			count:0
		};
	},
	components: {
		weiShare
	},
	onLoad(e) {
		// 腾讯移动统计
		this.$mta.Page.init();
		if(e.title){
			uni.setNavigationBarTitle({
				title:e.title
			})
		}
		this.getCount();
	},
	methods: {
		previewImage() {
			let img=this.$cdn.share_tip;
			uni.previewImage({
				indicator: 'default',
				current: img,
				urls: [img]
			});
		},
		// 打开分享底部弹框
		toShare() {
			this.$refs.weiShare.popupSwitch();
			/* uni.navigateTo({
				url: '../coupon/coupon-get-list'
			}); */
		},
		toPosterPageView(){
			uni.navigateTo({
				url: '/pages/system/recom-poster?type=share'
			});
		},
		toShareList(){
			uni.navigateTo({
				url: '/pages/my/my-share-list'
			});
		},
		getCount(memberId) {
			let postData = {};
			this.tui
				.request('/auth/api/shareIncome/getCount', postData, 'POST', false, true)
				.then(res => {
					if (res.code == 0) {
						// console.log('genoteDetail=' + JSON.stringify(res));
						this.totalCoin = res.data.totalCoin;
						this.count = res.data.count;
					}else{
						this.tui.toast(res.msg);
					}
				})
				.catch(res => {
					console.log(res);
				});
		}
	}
};
</script>

<style>
.container {
	padding: 0 50rpx 40rpx 50rpx;
	box-sizing: border-box;
}

.tui-flex {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 40px;
}

.tui-cube-box {
	width: 60px;
	height: 60px;
	position: relative;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	animation: tui-go 4s linear infinite;
}

@keyframes tui-go {
	0% {
		-webkit-transform: rotateX(0) rotateY(0);
		transform: rotateX(0) rotateY(0);
	}

	100% {
		-webkit-transform: rotateX(360deg) rotateY(360deg);
		transform: rotateX(360deg) rotateY(360deg);
	}
}

.tui-cube {
	width: 60px;
	height: 60px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
	box-sizing: border-box;
	font-size: 24rpx;
	color: #fff;
	text-align: center;
	word-break: break-all;
	word-wrap: break-word;
}

.tui-cube-1 {
	background: #fff;
	-webkit-transform: rotateY(90deg) translateZ(-30px);
	transform: rotateY(90deg) translateZ(-30px);
	color: #333 !important;
}

.tui-cube-2 {
	background: #8a5966;
	-webkit-transform: rotateY(90deg) translateZ(30px);
	transform: rotateY(90deg) translateZ(30px);
}

.tui-cube-3 {
	background: linear-gradient(-90deg, #5677fc, #5c8dff);
	-webkit-transform: rotateX(90deg) translateZ(30px);
	transform: rotateX(90deg) translateZ(30px);
}

.tui-cube-4 {
	background: #ed3f14;
	-webkit-transform: rotateX(90deg) translateZ(-30px);
	transform: rotateX(90deg) translateZ(-30px);
}

.tui-cube-5 {
	background: #ff7900;
	-webkit-transform: translateZ(30px);
	transform: translateZ(30px);
}

.tui-cube-6 {
	background: #19be6b;
	-webkit-transform: translateZ(-30px);
	transform: translateZ(-30px);
}

.tui-content-box {
	width: 100%;
	margin-top: 10px;
	padding: 20rpx;
	box-sizing: border-box;
	background: #fff;
	border-radius: 10rpx;
	box-shadow: 0 0 10rpx #eee;
}

.margin-top-30{
	margin-top: 20px !important;
}

.tui-content {
	color: #333;
	font-size: 30rpx;
	line-height: 44rpx;
	padding: 10rpx 0;
	text-align: justify;
}

.tui-content-email {
	color: #5677fc !important;
}

.tui-footer {
	display: flex;
	align-items: center;
	padding-top: 30rpx;
}

.tui-applets {
	width: 80px;
	height: 80px;
	display: block;
}

.tui-footer-text {
	font-size: 24rpx;
	color: #999;
	padding-left: 20rpx;
	width: 300rpx;
}
.span-big{
	font-size: 32px;
	color: #FF7900;
}
</style>
